<template>
  <div class="container">
    <div class="seletContainer">
      <ul>
        <li :class="[itemsStyle,itemStyleDefault,isSelected(index)]" :style="{width:
        100/itemInfo.length + '%'}"
            v-for="(item,index) in itemInfo" v-bind:key="index"
            v-on:click="itemClick(index)"
        >
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'selectBar',
  props: {
    itemInfo: Array,
  },
  data () {
    return {
      itemsStyle: 'itemsStyle',
      itemsStyleselect: 'itemsStyle-select',
      itemStyleDefault: 'itemsStyle-default',
      currentItem: 0,
    }
  },
  methods: {
    isSelected (index) {
      if (this.currentItem === index) {
        return this.itemsStyleselect
      }
      else {
        return null
      }
    },
    itemClick (index) {
      this.currentItem = index
      /*执行回调*/
      this.$emit('callBack', index)
    },
  },

}
</script>

<style scoped lang="less">
  .container {
    width: 3.75rem;
    height: 0.34rem;
    overflow: hidden;
    .seletContainer {
      border: 0.01rem solid rgba(57, 104, 255, 0.5);
      border-radius: 0.05rem;
      height: 0.24rem;
      width: 3.44rem;
      margin: 0.05rem auto;
      overflow: hidden;
      .itemsStyle {
        display: inline-block;
        height: 0.24rem;
        line-height: 0.24rem;
        font-size: 0.14rem;
        float: left;
        text-align: center;
      }
      .itemsStyle-default {
        color: #3968FF;
        background-color: #fff;
      }
      .itemsStyle-select {
        color: #fff;
        background-color: #3968FF; //蓝色
      }
    }
  }
</style>
